CSS
- 1. Cascading Style Sheets (CSS) and Dreamweaver Outline About Cascading Style Sheets ............................................................................................................................................................................ 1 Types of style sheets ...................................................................................................................................................................................... 1 Steps to create an external style sheet .............................................................................................................................................................. 2 Open CSS styles tab ........................................................................................................................................................................................ 2 Create style sheet ........................................................................................................................................................................................... 2 Save your stylesheet........................................................................................................................................................................................... 3 Link a style sheet to an HTML page.................................................................................................................................................................... 3 Experiment with the CSS features on your new document ............................................................................................................................... 4 So what if you want to add to or edit the existing styles provided? ................................................................................................................. 5 Edit Tag styles ................................................................................................................................................................................................. 5 Other styles .................................................................................................................................................................................................... 6 Understanding Styles and Making Additions ..................................................................................................................................................... 6 Adding block tag styles ................................................................................................................................................................................... 6 Adding class styles .......................................................................................................................................................................................... 6 Deleting styles ................................................................................................................................................................................................ 7 Additional Resources .......................................................................................................................................................................................... 7 About Cascading Style Sheets Cascading Style Sheets (CSS) keep style separate from text and define how things appear in a browser. Example, you can use CSS to define how all Heading 1 elements look on all pages in your site. Types of style sheets 1) External style sheets – by far the most powerful way to use CSS. You define styles in a text file saved with a .css extension. Then link your web pages to that style sheet. • Use external style sheets when you want a style to be global (applied to multiple pages in a website). Then when you revise a style in an external style sheet, the change is reflected on every page linked to the style sheet. 2) Internal style sheet – Styles are defined in the <head> section of an individual webpage. Internal styles apply only to the page they are defined in. They may be useful if you wish to make exceptions to your site’s style rules for just one page. 12/23/2008 Page 1 Copyright, Office of Technology, Bloomsburg University
- 2. Cascading Style Sheets (CSS) and Dreamweaver Steps to create an external style sheet Open CSS styles tab In Dreamweaver, click Window along the top menu bar > then choose CSS Styles. Create style sheet To get used to how CSS style sheets work, the easiest way to proceed is to apply an already created sheet in Dreamweaver. Choose File > New > Page from Sample > CSS Style Sheet. For this exercise click Text: Verdana and then press the Create button near the bottom of the window. 12/23/2008 Page 2 Copyright, Office of Technology, Bloomsburg University
- 3. Cascading Style Sheets (CSS) and Dreamweaver The following is what populates the screen once you pick Text: Verdana. Note the tag is written first followed by a bracket { Next there are specific Save your defined properties stylesheet Click Filea closing bracket } Lastly – Save As and save your style sheet. The most common naming to delete is Be careful not convention style.css or punctuation or the brackets style will not work correctly! Link a style sheet to an HTML page To see the new stylesheet in action, create a new basic HTML page. File > New > Blank > HTML and Create. In the Title area type Test of CSS To link a CSS sheet to your new page, look in the CSS panel on the right side of the Dreamweaver screen. If not available click Window – CSS Styles. Click the Attach Style Sheet icon. 12/23/2008 Page 3 Copyright, Office of Technology, Bloomsburg University
- 4. Cascading Style Sheets (CSS) and Dreamweaver A window appears asking if you wish to link or import, either would work. However, most web designers choose the link option. Click the Browse button to select your new style sheet. Choose Link and then OK. You have now linked a style sheet to an HTML document. Now the fun begins! Experiment with the CSS features on your new document Apply heading1, heading2 and heading3 tags to your new document to see how they appear. Type a line – “this is a sample of the small text option.” Highlight the word small and select .small from the Styles menu. Type “here’s a sample of xbig styled text and use the .xbig style Type “here’s text surrounded by a box style” and use the .box1 or .box2 style. 12/23/2008 Page 4 Copyright, Office of Technology, Bloomsburg University
- 5. Cascading Style Sheets (CSS) and Dreamweaver So what if you want to add to or edit the existing styles provided? Edit Tag styles To edit a tag style, click on it in the CSS styles panel. These are the main items such as body, td, th, those items without a period (.) in front of them (such as the .bodystyle item). You will see all the Properties for the style directly below the item you selected. Example: Click on Body tag. If you wanted to apply a different background color, select that under background-color. Click in the box next to that item to use the color picker. You could apply many items this way. As you apply new options they will be automatically written in your css stylesheet. You will need to save both files to keep your new changes. Note: You may also select the tag (i.e., body), and then click the Pencil icon which will open a window to apply changes. Either way is fine. 12/23/2008 Page 5 Copyright, Office of Technology, Bloomsburg University
- 6. Cascading Style Sheets (CSS) and Dreamweaver Other styles To edit the other styles, those with a period (.) in front of them (i.e., .bodystyle), select the item and edit the properties as described above. Understanding Styles and Making Additions When you use a predefined style choice in Dreamweaver, you are offered regular tags plus style choices. There are many, many other things you can do with CSS. More so than we have time to go through in this tutorial. Adding block tag styles In the CSS properties area, click the + icon to add a new rule. Select Tag radio button. Select the tag you wish to define by using the drop down arrow. The Define In area should have your active style sheet listed. Click OK. Add properties as you desire. Adding class styles In the CSS properties area, click the + icon to add a new rule. 12/23/2008 Page 6 Copyright, Office of Technology, Bloomsburg University
- 7. Cascading Style Sheets (CSS) and Dreamweaver Select Class radio button. Create a name for the style. Precede with a period (.) – example: .redtext The Define In area should have your active style sheet listed. Click OK. Add properties as you desire. Deleting styles Should you wish to delete a style, click on the item in the Styles properties area and click the trash can icon. Additional Resources This tutorial provides a very basic overview of CSS. There is so much more that can be done using CSS. Two recommended resources: • Book – Stylin’ with CSS by Charles Wyke-Smith • W3 Schools Online CSS Tutorials - http://www.w3schools.com/css/default.asp 12/23/2008 Page 7 Copyright, Office of Technology, Bloomsburg University